<!--ules
 * @Author: lsy
 * @Date: 2023-02-14 22:35:38
 * @LastEditors: lsy
 * @LastEditTime: 2023-02-16 19:43:37
 * @Description: 请填写简介
-->
<template>
  <div>
    <sc-basic-form :formItems="couponFormItems" :model="couponModel" label-width="140" ref="formRef">
    </sc-basic-form>

    <!-- 业务范围 -->
    <div class="range">
      <div class="title"><b>业务范围</b></div>
      <!-- <div class="item p-flex p-ai-c">
        <div>片区</div>
        <div>
          <el-input placeholder="请输入" v-model="paramsData.areaName" />
        </div>
      </div> -->
      <div class="item p-flex p-ai-c">
        <div>校区</div>
        <el-select v-model="paramsData.schoolName" placeholder="请选择" size="large">
          <el-option v-for="item in schoolOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="item p-flex p-ai-c">
        <div>课程类型</div>
        <el-select v-model="paramsData.courseType" placeholder="请选择" size="large">
          <el-option v-for="item in courseOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="item p-flex p-ai-c">
        <div>学科分类</div>
        <el-select v-model="paramsData.classfily" placeholder="请选择" size="large">
          <el-option v-for="item in courseOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="item p-flex p-ai-c">
        <div>是否套餐</div>
        <el-select v-model="paramsData.isSetMeal" placeholder="请选择" size="large">
          <el-option label="否" value=0 />
          <el-option label="是" value=1 />
        </el-select>
      </div>
      <div class="item p-flex p-ai-c">
        <div>课程名称</div>
        <div>
          <el-input placeholder="请输入" v-model="paramsData.courseName" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, defineProps, defineEmits, defineExpose } from "vue";

import { couponFormItems } from "./data";

const props = defineProps({
  couponInfo: {
    type: Object,
    default: () => ({})
  }
})

const paramsData = reactive({
  areaName: "",
  schoolName: "",
  courseType: "",
  subject: "",
  isSetMeal: "",
  courseName: "",
  classfily:"",
})

const schoolOption = reactive([
  { value: "外地校区", label: "外地校区" },
  { value: "商学院", label: "商学院" },
  { value: "所有校区", label: "所有校区" },
])

const courseOption = reactive([
  { value: "课程1", label: "课程1" },
  { value: "课程2", label: "课程2" },
])

const emits = defineEmits(['update:couponInfo'])

const couponModel = computed({
  get() {
    return props.couponInfo
  },
  set(val) {
    emits('update:couponInfo', val)
  }
})

let introdStudent = ref({})
let introEmployee = ref({})

const formRef = ref(null)

function introdStudentChange(sudent) {
  introdStudent.value = {
    name: sudent.name + " " + sudent.phone,
    id: sudent.studentId,
  };
  emits('update:couponInfo', {
    ...couponModel.value,
    recommendStudentId: sudent.studentId,
  })
}
function introEmployeeChange(employee) {
  introEmployee.value = {
    memberName: employee.memberName + " " + employee.memberPhone,
    id: employee.id,
  };
}
function resetForm(form, resetValue = {}) {
  Object.keys(form).forEach((key) => {
    form[key] = resetValue[key] ?? "";
  });
}
function validate(callBackObj) {
  formRef.value.validate(callBackObj)
}

defineExpose({
  validate
})
</script>

<style lang="scss" scoped>
.mr10 {
  margin-right: 10px;
}

.range {
  .title {
    font-size: 14px;
    color: #606266;
    padding-left: 20px;
  }

  .item {
    margin-top: 15px;

    &>div:nth-child(1) {
      width: 140px;
      text-align: end;
      padding-right: 15px;
      font-size: 14px;
      color: #606266;
    }

    &>div:nth-child(2) {
      flex: 1;
    }
  }
}
</style>
